<template>
  <header class="header">
    <h1>todos</h1>
    <!-- v-model关联全选状态
      页面变化(勾选true, 未勾选false) -> v-model -> isAll变量 -->
    <input id="toggle-all" class="toggle-all" type="checkbox" v-model="isAll">
    <label for="toggle-all"></label>
    <!-- 3.0 键盘事件-回车按键
         3.1 输入框 - v-model获取值
     -->
    <input
      class="new-todo"
      placeholder="输入任务名称-回车确认"
      v-model="task"
      @keydown.enter="addTask"
      autofocus
    />
  </header>
</template>

<script>
export default {
  props:{
list:{
  type:Array,
  required:true
}
  },
  computed:{
  isAll:{
      //  小选框统计状态 -> 全选框
        //  如果没有数据, 直接返回false-不要让全选勾选状态

    get(){
      return this.list.every(item => item.isDone)
    },
    // 只有true / false
   //影响数组里每个小选框绑定的isDone属性
    set(val){
    console.log(val);
    this.$emit('checkAll',val)
    }
  }
  },
 data(){
   return{
     task:''
   }
 },
 methods:{
   addTask(){
     console.log('addTask');
     this.$emit('addTask',this.task)
     this.task=''
   }
 }
}
</script>